<template>
  <div class="course">
    <courseHeader :albumId="albumId" :userInfoImg="userInfoImg" ref="courseHeaderRef"></courseHeader>
    <AnchorInfo
      :statCountInfo="statCountInfo"
      :userInfo="userInfo"
      :productionList="productionList"
    ></AnchorInfo>
    <UserComment :comments="comments"></UserComment>
  </div>

  <div class="bigBox">
    <!-- 猜你喜欢 -->
    <div class="albunm_title">
      <div class="albunm_text">猜你喜欢</div>
    </div>
  
    <Related v-for="like in likeList" :key="like.albumId" :like="like"></Related>
    <bottom></bottom>
  </div>
</template>

<script lang="ts" setup>
import courseHeader from "./components/courseHeader/index.vue";
import AnchorInfo from "./components/AnchorInfo/index.vue";
import UserComment from "./components/UserComment/index.vue";
import bottom from "./components/bottom/index.vue";
import { ref, onMounted, nextTick, watch } from "vue";
import { useRoute } from "vue-router";
import courseApi, { type AnyObject } from "@/apis/course";
import { formatDate } from "@/utils/formate";
import Related from "./Related.vue";
import { reqLikeValue } from "@/apis/like";

const likeList = ref(); //猜你喜欢数据

// 初始化数据
const route = useRoute();
let albumId = Number(route.params.albumId);
let anchorId = ref(0)
anchorId.value = Number(route.query.anchorId)
const courseHeaderRef = ref<any>()


let params ={
  anchorId,
  page: 1,
  pageSize: 3,
  asc: false,
}

let data = {
  page: 1,
  pageSize: 10,
  albumId,
  v: 1692064693595,
};

const aa = {
    pageNum: 1,
		pageSize: 5,
		sort: 1,
}
const statCountInfo = ref<AnyObject>({});
const userInfo = ref<AnyObject>({});
const productionList = ref<AnyObject[]>([]);
const comments = ref<AnyObject[]>([]);

onMounted(() => {
watch(() => courseHeaderRef.value.trackDetail, () => { 
  anchorId.value = +courseHeaderRef.value.trackDetail
  
  getProduction({anchorId:anchorId.value, page: 1, pageSize: 3, asc: false,});
  getAnchorInfo(anchorId.value);
})
  comment(data);
  getLike()
});



// 功能函数-------------------------------

// 发请求获取数据---------------------------

// 获取主播信息
const userInfoImg = ref();
const getAnchorInfo = async (anchorId: number) => {
  try {
    let res = await courseApi.reqAnchorInfo(anchorId);
    if (res.ret == 0) {
      statCountInfo.value = res.data.statCountInfo;
      userInfo.value = res.data.userInfo;
      userInfoImg.value = userInfo.value.logo;
    }
  } catch (err) {
    console.log(err);
  }
};

// 获取主播作品
const getProduction = async (params: AnyObject) => {
  try {
    let res = await courseApi.reqProduction(params);
    productionList.value = res.data.albumBriefDetailInfos;
  } catch (err) {
    console.log(err);
  }
};

// 评论信息
const comment = async (data: AnyObject) => {
  try {
    let res = await courseApi.reqComment(data);
    if (res.ret == 0) {
      comments.value = res.data.comments.map((item: any) => {
        return {
          smallHeader: item.smallHeader,
          content: item.content,
          likes: item.likes,
          nickname: item.nickname,
          createdAt: formatDate(new Date(item.createdAt), "YYYY-MM-DD"),
        };
      });
    }
  } catch (err) {
    console.error(err);
  }
};
// 猜你喜欢
const getLike = async() => {
  try {
    let result = await reqLikeValue(aa)
    if(result.ret === 200){
      likeList.value = result.data.albums
    }
  } catch (error) {
    console.log(error);
  }
}
</script>

<style lang="less" scoped>
.bigBox{
  top: 1500px;
  width: 100%;
  height: 100%;
}
.margin_bottom {
  margin-bottom: 500px;
}
.wrap_content{
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      width: 375px;
      height: 313px;
    }
.albunm_title{
  position: relative;
  width: 360.2px;
  height: 59px;
  line-height: 59px;
}
.albunm_text {
  width: 345px;
  height: 25px;
  font-size: 18px;
  color: #40404c;
  margin: 0 0 17px 15px;
  font-weight: 900;
}

.albunm_title{
  position: relative;
  width: 360.2px;
  height: 59px;
  line-height: 59px;
}
.albunm_text{
  width: 345px;
  height: 25px;
  font-size: 18px;
  color: #40404C;
  margin: 20px 0 17px 15px;
  font-weight: 900;
}
</style>